<template>
    <div id="borrowHistory">
      <!-- /.u-menu -->
        <div class="u-main">
          <div class="u-tab-wrap">
            <ul class="u-tab clearfix">
              <li class="current"><a>借贷记录</a></li></ul>
          </div>
          <div id="tab-box">
            <div id="repay_list_box" class="u-form-wrap" style="padding: 15px;width: 900px">
              <div style="margin-bottom: 20px;">
                <el-table
                  :data="myborrow.list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="monloansTime"
                    label="还款日期"
                    width="180">
                    <template slot-scope="scope">
                      <p>{{scope.row.monloansTime | timefilters }}</p>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="repayName"
                    label="借贷类型"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="monloansBalance"
                    label="借贷金额(元)">
                  </el-table-column>
                  <el-table-column
                    prop="monloansPaymonth"
                    label="当月应还(元)">
                  </el-table-column>
                  <el-table-column
                    prop="monloansPaynow"
                    label="已还金额(元)">
                  </el-table-column>
                  <el-table-column
                    prop="monloansPaybefore"
                    label="当月未还(元)">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="待还金额(元)">
                  </el-table-column>
                  <el-table-column
                    prop="monloansMonth"
                    label="借贷月数(月)">
                  </el-table-column>
                  <el-table-column
                    prop="monloansLastmonth"
                    label="待还月数(月)">
                  </el-table-column>
                  <el-table-column
                    prop="monloansStatus"
                    label="状态">
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                      <el-button @click="handleClick(scope.row)" type="text" size="small">还款</el-button>
                      <el-button type="text" size="small">提前还款</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="block">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="myborrow.total">
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      <!-- /.u-main -->
      <!-- /.row -->
    </div>
</template>

<script>
    export default {
        name: "borrowHistory",
        data(){
          return{
            currentPage:1,
            pagesize:4,
            myborrow:{list:[]},
          }
        },
        created(){
          this.axios.post("/api/myborrowHistory/records",{
            pageNum:this.currentPage,
            pageSize:this.pagesize
          }).then((data)=>{
              this.myborrow=data.data
            })
        },
      methods:{
        handleSizeChange: function (size) {
          this.pagesize = size;
        },
        handleCurrentChange: function(currentPage){
          this.currentPage = currentPage;
        },
      },
      filters: {
        timefilters(val) {
          if (val == null || val == "") {
            return "暂无时间";
          } else {
            let d = new Date(val);   //val 为表格内取到的后台时间
            let month =
              d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
            let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
            let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
            let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
            let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
            let times=d.getFullYear() + '-' + month + '-' + day ;
            return times;
          }
        }
      },
    }
</script>

<style scoped>
  @import  '../../assets/usercss/css/UserCSS.css';

</style>
